<template>
	<view class="container">
		<!-- 头部导航栏 -->
		<view class="header">
			<view class="header-left" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<view class="header-title">优惠券</view>
			<view class="header-right">
				<text class="header-icon">⋯</text>
				<text class="header-separator">|</text>
				<text class="header-icon">⊙</text>
			</view>
		</view>
		
		<!-- 主内容区域：仅展示“待使用”优惠券 -->
		<view class="main-content">
			<view class="coupon-list">
				<view 
					class="coupon-card pending" 
					v-for="(coupon, index) in pendingCoupons" 
					:key="index" 
					@click="useCoupon(coupon)"
				>
					<view class="coupon-top">
						<view class="coupon-info-left">
							<text class="usage-limit">{{ coupon.limit }}</text>
							<text class="usage-condition">{{ coupon.condition }}</text>
						</view>
						<view class="coupon-amount">
							<text class="discount-symbol">¥</text>
							<text class="discount-amount">{{ coupon.amount }}</text>
						</view>
					</view>
					<view class="coupon-divider"></view>
					<view class="coupon-bottom">
						<text class="validity-period">有效期至: {{ coupon.validity }}</text>
						<text class="action-text">去使用 ></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
	      // 待使用优惠券数据（补充name字段，因为代码中用到了coupon.name）
	      pendingCoupons: [
	        {
	          id: 1,
	          name: "加油站专属券", // 补充name字段
	          amount: 20,
	          limit: '仅限于XX加油站使用',
	          condition: '满200元可用',
	          validity: '2020.04.11—2023.05.11'
	        },
	        {
	          id: 2,
	          name: "通用满减券", // 补充name字段
	          amount: 20,
	          limit: '通用',
	          condition: '满200元可用',
	          validity: '2020.04.11—2023.05.11'
	        },
	        {
	          id: 3,
	          name: "加油站专属券", // 补充name字段
	          amount: 20,
	          limit: '仅限于XX加油站使用',
	          condition: '满200元可用',
	          validity: '2020.04.11—2023.05.11'
	        }
	      ]
	    }
	  },
	  methods: {
	    goBack() {
	      uni.navigateBack();
	    },
	    useCoupon(coupon) {
	      uni.showModal({
	        title: '选择优惠券',
	        // 这里用到了coupon.name，所以必须在数据中补充name字段
	        content: `确定使用「${coupon.name}」（满${coupon.condition.split('满')[1]}，减${coupon.amount}元）吗？`,
	        success: (res) => {
	          if (res.confirm) {
	            // 1. 获取页面栈，确认有上一页（订单页）
	            const pages = getCurrentPages();
	            if (pages.length < 2) {
	              uni.showToast({ title: "页面错误，无法返回", icon: "none" });
	              return;
	            }
	
	            // 2. 获取上一页（订单页）实例
	            const prevPage = pages[pages.length - 2];
	
	            // 3. 回传选中的优惠券数据到订单页
	            prevPage.$vm.couponInfo = {
	              id: coupon.id,
	              name: coupon.name,
	              discount: coupon.amount,
	              condition: coupon.condition,
	              isSelected: true
	            };
	
	            // 4. 返回上一页，并提示选择成功
	            uni.navigateBack({
	              delta: 1,
	              success: () => {
	                uni.showToast({
	                  title: `已选择${coupon.amount}元优惠券`,
	                  icon: "success"
	                });
	              },
	              fail: (err) => {
	                console.error("返回订单页失败：", err);
	                uni.showToast({ title: "操作失败，请重试", icon: "none" });
	              }
	            });
	          }
	        } // 修复：补充success回调的闭合括号
	      }); // 修复：补充uni.showModal的闭合括号
	    } // 修复：补充useCoupon方法的闭合括号
	  } // 修复：补充methods对象的闭合括号
	}; // 修复：补充export default的闭合括号
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #f8f9fa;
		display: flex;
		flex-direction: column;
	}
	
	/* 头部样式 */
	.header {
		height: 88rpx;
		background-color: #1976d2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		position: relative;
		z-index: 100;
	}
	
	.header-left {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.back-icon {
		color: white;
		font-size: 48rpx;
		font-weight: bold;
	}
	
	.header-title {
		color: white;
		font-size: 36rpx;
		font-weight: 600;
	}
	
	.header-right {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}
	
	.header-icon {
		color: white;
		font-size: 32rpx;
	}
	
	.header-separator {
		color: white;
		font-size: 24rpx;
		opacity: 0.7;
	}
	
	/* 主内容区域 */
	.main-content {
		flex: 1;
		padding: 40rpx 32rpx;
		background-color: #fafafa;
	}
	
	/* 优惠券列表 */
	.coupon-list {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	
	/* 优惠券卡片（仅“待使用”样式） */
	.coupon-card {
		background: linear-gradient(135deg, #ff6b35, #ff8c42);
		border-radius: 24rpx;
		padding: 0;
		display: flex;
		flex-direction: column;
		position: relative;
		box-shadow: 0 12rpx 32rpx rgba(255, 107, 53, 0.35);
		overflow: visible;
		height: 220rpx;
		margin-bottom: 32rpx;
		transition: all 0.3s ease;
	}
	
	/* 优惠券撕口效果（左右小白圈） */
	.coupon-card::before,
	.coupon-card::after {
		content: '';
		position: absolute;
		top: 55%;
		transform: translateY(-50%);
		width: 36rpx;
		height: 36rpx;
		background-color: #f5f5f5;
		border-radius: 50%;
		z-index: 10;
	}
	.coupon-card::before { left: -12rpx; }
	.coupon-card::after { right: -12rpx; }
	
	/* 优惠券顶部区域 */
	.coupon-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 36rpx 48rpx 0 48rpx;
		height: 45%;
		box-sizing: border-box;
	}
	
	.coupon-info-left {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
		flex: 1;
	}
	
	.coupon-amount {
		display: flex;
		align-items: baseline;
		margin-left: 24rpx;
	}
	
	.discount-symbol {
		color: white;
		font-size: 42rpx;
		font-weight: bold;
		margin-right: 6rpx;
		vertical-align: top;
	}
	
	.discount-amount {
		color: white;
		font-size: 84rpx;
		font-weight: bold;
		line-height: 1;
	}
	
	/* 优惠券分隔线（虚线） */
	.coupon-divider {
		position: absolute;
		width: 100%;
		height: 2rpx;
		top: 55%;
		left: 0;
		transform: translateY(-50%);
		overflow: visible;
		z-index: 5;
	}
	.coupon-divider::before {
		content: '';
		position: absolute;
		top: 0;
		left: 18rpx;
		right: 18rpx;
		height: 2rpx;
		background: repeating-linear-gradient(
			to right,
			rgba(255, 255, 255, 0.8) 0rpx,
			rgba(255, 255, 255, 0.8) 4rpx,
			transparent 4rpx,
			transparent 8rpx
		);
	}
	
	/* 优惠券底部区域 */
	.coupon-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 48rpx 36rpx 48rpx;
		height: 55%;
		box-sizing: border-box;
	}
	
	.usage-limit {
		font-size: 26rpx;
		color: white;
		line-height: 1.4;
		opacity: 0.9;
		font-weight: 500;
	}
	
	.usage-condition {
		font-size: 32rpx;
		color: white;
		font-weight: 700;
		line-height: 1.4;
		margin-top: 4rpx;
	}
	
	.validity-period {
		font-size: 26rpx;
		color: white;
		line-height: 1.4;
		opacity: 0.9;
		font-weight: 500;
	}
	
	.action-text {
		font-size: 28rpx;
		font-weight: 600;
		color: white;
		white-space: nowrap;
		background-color: transparent;
	}
	
	/* 点击交互效果 */
	.coupon-card.pending:active {
		transform: scale(0.98);
		box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.5);
	}
	.coupon-card.pending:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 16rpx 40rpx rgba(255, 107, 53, 0.4);
	}
</style>